﻿@page "/"

<PageTitle>Index</PageTitle>

<MudGrid Spacing="6">
    <MudItem xs="12" sm="6" md="4">
        <MudPaper Class="pa-4 d-flex justify-center flex-wrap" Height="100%">
            <MudButton Variant="Variant.Filled" Class="ma-4">Default</MudButton>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ma-4">Primary</MudButton>
            <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="ma-4">Secondary</MudButton>
            <MudButton Variant="Variant.Filled" Disabled="true" Class="ma-4">Disabled</MudButton>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudPaper Class="pa-4 d-flex justify-center flex-wrap" Height="100%">
            <MudButton Variant="Variant.Text" Class="ma-4">Default</MudButton>
            <MudButton Variant="Variant.Text" Color="Color.Primary" Class="ma-4">Primary</MudButton>
            <MudButton Variant="Variant.Text" Color="Color.Secondary" Class="ma-4">Secondary</MudButton>
            <MudButton Variant="Variant.Text" Disabled="true" Class="ma-4">Disabled</MudButton>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="12" md="4">
        <MudPaper Class="pa-4 d-flex justify-center flex-wrap" Height="100%">
            <MudButton Variant="Variant.Outlined" Class="ma-4">Default</MudButton>
            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="ma-4">Primary</MudButton>
            <MudButton Variant="Variant.Outlined" Color="Color.Secondary" Class="ma-4">Secondary</MudButton>
            <MudButton Variant="Variant.Outlined" Disabled="true" Class="ma-4">Disabled</MudButton>
        </MudPaper>
    </MudItem>
    <MudItem md="12" lg="6">
        <MudSimpleTable Style="overflow-x: auto; width:100%;">
            <thead>
                <tr>
                    @foreach (var h in headings)
                    {
                        <th>@h</th>
                    }
                </tr>
            </thead>
            <tbody>
                @foreach (var row in rows)
                {
                    <tr>
                        @foreach (var x in row.Split())
                        {
                            <td>@x</td>
                        }
                    </tr>
                }
            </tbody>
        </MudSimpleTable>
    </MudItem>
    <MudItem md="12" lg="6">
        <MudPaper Class="pa-5" Height="100%" Width="100%">
            <MudGrid>
                <MudItem lg="4" md="12">
                    <MudAlert Severity="Severity.Normal" Class="mb-5">Default Square</MudAlert>
                    <MudAlert Severity="Severity.Info" Class="my-5">Info Square</MudAlert>
                    <MudAlert Severity="Severity.Success" Class="my-5">Success Square</MudAlert>
                    <MudAlert Severity="Severity.Warning" Class="my-5">Warning Square</MudAlert>
                    <MudAlert Severity="Severity.Error" Class="mt-5">Error Square</MudAlert>
                </MudItem>
                <MudItem lg="4" md="12">
                    <MudAlert Severity="Severity.Normal" Variant="Variant.Outlined" Class="mb-4">Default Square</MudAlert>
                    <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="my-4">Info Square</MudAlert>
                    <MudAlert Severity="Severity.Success" Variant="Variant.Outlined" Class="my-4">Success Square</MudAlert>
                    <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Class="my-4">Warning Square</MudAlert>
                    <MudAlert Severity="Severity.Error" Variant="Variant.Outlined" Class="mt-4">Error Square</MudAlert>
                </MudItem>
                <MudItem lg="4" md="12">
                    <MudAlert Severity="Severity.Normal" Variant="Variant.Filled" Class="mb-5">Default Square</MudAlert>
                    <MudAlert Severity="Severity.Info" Variant="Variant.Filled" Class="my-5">Info Square</MudAlert>
                    <MudAlert Severity="Severity.Success" Variant="Variant.Filled" Class="my-5">Success Square</MudAlert>
                    <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" Class="my-5">Warning Square</MudAlert>
                    <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Class="mt-5">Error Square</MudAlert>
                </MudItem>
            </MudGrid>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudPaper Class="pa-4 d-flex justify-space-around flex-wrap" MinHeight="100px" Height="100%">
            <MudBadge Content="3" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
                <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
            </MudBadge>
            <MudBadge Content="100" Color="Color.Primary" Overlap="true" Class="mx-6 my-4">
                <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
            </MudBadge>
            <MudBadge Icon="@Icons.Material.Filled.Lock" Color="Color.Error" Overlap="true" Bordered="true" Class="mx-6 my-4">
                <MudButton Color="Color.Error" Variant="Variant.Filled" DisableElevation="true">Security Issues</MudButton>
            </MudBadge>
            <MudBadge Dot="true" Color="Color.Info" Class="mx-6 my-4">
                <MudText>Bug Reports</MudText>
            </MudBadge>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudPaper Class="pa-4 d-flex justify-space-around flex-wrap" MinHeight="100px" Height="100%">
            <MudChip Class="my-auto">Default</MudChip>
            <MudChip Color="Color.Primary" Class="my-auto">Primary</MudChip>
            <MudChip Color="Color.Secondary" Class="my-auto">Secondary</MudChip>
            <MudChip Color="Color.Info" Class="my-auto">Info</MudChip>
            <MudChip Color="Color.Success" Class="my-auto">Success</MudChip>
            <MudChip Color="Color.Warning" Class="my-auto">Warning</MudChip>
            <MudChip Color="Color.Error" Class="my-auto">Error</MudChip>
            <MudChip Color="Color.Dark" Class="my-auto">Dark</MudChip>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="12" md="4">
        <MudPaper Class="pa-4 d-flex justify-space-around flex-wrap" MinHeight="100px" Height="100%">
            <MudAvatar Color="Color.Default" Class="my-auto">M</MudAvatar>
            <MudAvatar Color="Color.Primary" Class="my-auto">U</MudAvatar>
            <MudAvatar Color="Color.Secondary" Class="my-auto">D</MudAvatar>
            <MudAvatar Color="Color.Tertiary" Class="my-auto">B</MudAvatar>
            <MudAvatar Color="Color.Info" Variant="Variant.Outlined" Class="my-auto">L</MudAvatar>
            <MudAvatar Color="Color.Success" Variant="Variant.Outlined" Class="my-auto">A</MudAvatar>
            <MudAvatar Color="Color.Warning" Variant="Variant.Outlined" Class="my-auto">Z</MudAvatar>
            <MudAvatar Color="Color.Error" Variant="Variant.Outlined" Class="my-auto">R</MudAvatar>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    string[] headings = { "ID", "Title", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Krishna kpartner0@usatoday.com Male 28.25.250.202",
        @"2 Webb wstitle1@ning.com Male 237.168.134.114",
        @"3 Nathanil nneal2@cyberchimps.com Male 92.6.0.175",
        @"4 Adara alockwood3@patch.com Female 182.174.217.152",
        @"5 Cecilius cchaplin4@shinystat.com Male 195.124.144.18",
        @"6 Cicely cemerine9@soup.io Female 138.94.191.43",
    };
}